<template>
  <!--异常报表-->
  <div class="components-layout-demo">
    <a-layout style="height:100%">
      <a-layout style="background: #fff;height:100%">
<!--        <a-layout-sider class="layout-sider-left">-->
<!--          <div style="height:100%;">-->
<!--            <sidebar-check-user-->
<!--              :deptTree="deptTree"-->
<!--              :deptChecked.sync="deptCheckedLeft"-->
<!--              :userChecked.sync="userCheckedLeft"-->
<!--              :userSerialChecked.sync="userSerialCheckedLeft"-->
<!--              @on-check="serchByChecked"-->
<!--              @on-select="serchByselected"-->
<!--              :heightTree ='heightTreeLeft'-->
<!--              :heightTable ="heightTableLeft"-->
<!--              :setHeight="'13px'"-->
<!--            />-->
<!--          </div>-->
<!--        </a-layout-sider>-->
        <a-layout-content class="layoutContent">
          <div class="components-table-demo-size" style="height:100%">
            <!-- tools盒子 每个页面必须存在的div盒子，除了表格以外的功能都放在这个里面 -->
            <div id="tools">
              <!-- 功能按钮 -->
<!--              <div class="divPadiAlign2">-->
<!--                <a-button type="primary" class="button-marin2" @click="handleExport">-->
<!--                  导出-->
<!--                </a-button>-->
<!--              </div>-->
<!--              <a-divider style="margin: 5px 0"/>-->
              <!-- <div class="height8"></div> -->

              <a-form layout="inline" class="serchForm2" :selfUpdate="true">
                <a-form-item label="开始日期" class="marginBtm">
                  <a-date-picker
                    :disabledDate="disabledStartDate"
                    format="YYYY-MM-DD"
                    v-model="beginDate"
                    placeholder="开始日期"
                    style="width: 150px;"
                    @openChange="handleStartOpenChange"
                  />
                </a-form-item>
                <a-form-item label="结束日期" class="marginBtm">
                  <a-date-picker
                    :disabledDate="disabledEndDate"
                    format="YYYY-MM-DD"
                    placeholder="结束日期"
                    v-model="endDate"
                    :open="endOpen"
                    style="width: 150px;"
                    @openChange="handleEndOpenChange"
                  />
                </a-form-item>
                <!-- <a-form-item label="类型" class="marginBtm">
                  <a-select
                    showArrow
                    mode="multiple"
                    placeholder="请选择记录类型"
                    :maxTagCount ="number"
                    style="width: 200px;"
                    @change="handleChange"
                    @popupScroll="popupScroll"
                  >
                    <a-select-option
                      v-for="bdRecordType in bdRecordTypeList"
                      :key="bdRecordType.recordType"
                    >{{bdRecordType.recordTypeName}}</a-select-option>
                  </a-select>
                </a-form-item> -->
                <a-form-item label="关键字" class="marginBtm">
                  <a-input v-model="searchNameRight"
                           allowClear placeholder="请输入工号/姓名" class="marginBtm"
                           @pressEnter="handleQuery"/>
                </a-form-item>

                <a-form-item class="marginBtm">
                  <a-button type="primary" @click="handleQuery">
                    查询
                  </a-button>
                </a-form-item>
              </a-form>





            </div>
            <!-- 右侧数据表格 -->
            <div id="tableBox" class="tableOthStyle">
              <a-table
                bordered
                :fixed="true"
                class="a-table"
                size="small"
                :columns="columnsRight"
                :dataSource="listRight"
                :loading="tableLoading"
                :rowKey="(record) => record.id"
                :pagination="paginationRight"
                :scroll="{ y: yHeight,x: xWidth}"
              >
              </a-table>
            </div>
          </div>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
  import sidebarCheckDoor from "@/components/accessControlSystem/sidebarCheckDoor.vue";
  import sidebarCheckUser from "@/components/accessControlSystem/sidebarCheckUser.vue";
  import { tableBoxHeight } from "@/api/communal";
  import dept from "@/api/accessControlSystem/dept";
  import place from "@/api/accessControlSystem/place";
  import door from "@/api/accessControlSystem/door";
  import exceptionAnalysis from "@/api/exceptionAnalysis";

  import moment from "moment";
  import api from "@/config/config";

  export default {
    components: {
      sidebarCheckDoor,
      sidebarCheckUser
    },

    data() {
      let _this = this;
      return {
        number:1,
        beginDate: moment(), // moment().startOf('month'), //开始日期 条件
        endDate: moment(), //moment().endOf('month').endOf('month'), //结束日期 条件
        jlType: [], //记录类型 条件
        inDoorRuleNo: 1,
        outDoorRuleNo: 1,
        bdRecordTypeList: [
          {recordType:1,recordTypeName:"刷卡开门" },
          {recordType:2,recordTypeName:"刷卡+密码开门" },
          {recordType:3,recordTypeName:"刷卡等待密码" },
        ], //所有记录类型

        //树形结构
        deptTree: [],
        placeTree: [],

        /* 左侧 */
        heightTreeLeft:"",
        heightTableLeft:"500",
        deptCheckedLeft: [],
        deptselectedLeft:[],
        userCheckedLeft: [],
        userSerialCheckedLeft: [],

        /* 右侧  */
        yHeight: 500,
        xWidth:500,
        pageNoRight: 1,
        pageSizeRight: 10,
        searchNameRight: "",
        tableLoading: false,
        listRight: [],
        selectedXhRight: [], // Check here to configure the default column
        columnsRight: [
          // {
          //   title: '序号',     //表头
          //   dataIndex: 'serialNumber',   //字段名称
          //   width: '50px',    //设列宽度
          //   align: 'center',  //居中显示
          //   fixed: "left",
          //   className: 'changeBack',   //重置覆盖背景色为浅灰色，否则是白色的
          //   customRender: (value, row, index) => `${(this.paginationRight.current - 1) * this.paginationRight.pageSize + index + 1}`  //设置动态序号
          // },
          {
            title: "HR_MONTH",
            dataIndex: "attendanceYearMonth",
            align: "center",
            width: "80px",
            className: 'changeBack'
          },
          {
            title: "TERM",
            dataIndex: "attendanceDate",
            align: "center",
            width: "80px",
            className: 'changeBack'
          },
          {
            title: "BADGE",
            dataIndex: "userNo",
            align: "center",
            width: "100px",
            className: 'changeBack'
          },
          {
            title: "NAME",
            dataIndex: "userName",
            align: "center",
            width: "100px",
            className: 'changeBack'
          },
          {
            title: "DataFrom",
            dataIndex: "shiftBeginTime",
            align: "center",
            width: "120px",
            className: 'changeBack'
          },
          {
            title: "DataTo",
            dataIndex: "shiftEndTime",
            align: "center",
            width: "120px",
            className: 'changeBack'
          },
          {
            title: "actual_start_time",
            dataIndex: "swipeBeginTime",
            align: "center",
            width: "120px",
            className: 'changeBack'
          },
          {
            title: "actual_end_time",
            dataIndex: "swipeEndTime",
            align: "center",
            width: "120px",
            className: 'changeBack'
          },
          // {
          //   title: "SYSTEM_TIME",
          //   dataIndex: "systemTime",
          //   align: "center",
          //   width: "180px",
          //   className: 'changeBack'
          // },
          // {
          //   title: "BATCH_ID",
          //   dataIndex: "batchId",
          //   align: "center",
          //   width: "100px",
          //   className: 'changeBack'
          // },
          {
            title: "work_hours",
            dataIndex: "actualHoursH",
            align: "center",
            width: "80px",
            className: 'changeBack'
          },
          {
            title: "extra_hours",
            dataIndex: "extraHoursH",
            align: "center",
            width: "80px",
            className: 'changeBack'
          },
          {
            title: "act_workhours",
            dataIndex: "swipeTotalHoursH",
            align: "center",
            width: "80px",
            className: 'changeBack'
          },
          {
            title: "lost_workhours",
            dataIndex: "lostHoursH",
            align: "center",
            width: "80px",
            className: 'changeBack'
          },
          {
            title: "travel_hours",
            dataIndex: "travelHoursH",
            align: "center",
            width: "80px",
            className: 'changeBack'
          },
          {
            title: "defact_hours",
            dataIndex: "defactHoursH",
            align: "center",
            width: "80px",
            className: 'changeBack'
          },
          {
            title: "vacation_hours",
            dataIndex: "vacationHoursH",
            align: "center",
            width: "80px",
            className: 'changeBack'
          },
          // {
          //   title: "ID",
          //   dataIndex: "id",
          //   align: "center",
          //   width: "110px",
          //   className: 'changeBack'
          // }
        ],
        paginationRight: {
          current: 1,
          pageSize: 100, // 默认每页显示数量
          total: 0, //总条数
          showSizeChanger: true, // 显示可改变每页数量
          pageSizeOptions: [ "20", "30", "50", "100"], // 每页数量选项
          showTotal: total => `共 ${total} 条数据`, // 显示总数
          onShowSizeChange: (current, pageSize) => _this.changePage(1, pageSize), // 改变每页数量时更新显示
          onChange: (current, pageSize) => _this.changePage(current, pageSize) //点击页码事件
        },
        loading: true,
        endOpen: false,
      };
    },
    mounted(){
      let _this = this;
      //加载树形结构数据
      // dept.getTreeList().then(res => {
      //   _this.deptTree = res.data.result;
      // });
      // place.getTreeList().then(res => {
      //   _this.placeTree = res.data.result;
      // });
      // standardReports.findBdRecordType().then(res => {
      //   // console.log(res)
      //   this.bdRecordTypeList = res.data.result;
      // });
      this.yHeight = tableBoxHeight();
      this.xWidth = this.columnsRight.length*120;
      // 控制表格底部边框保持在底部，而不是在半空中
      let minHeight = document.getElementsByClassName("ant-table");
      minHeight[0].style.minHeight = tableBoxHeight() + 40 + "px";

      // 计算本页面左侧高度传值给组件
      let height = window.innerHeight;
      // 减的数值具体可参考communal.js,左侧树和表格的高度
      this.heightTableLeft = String(height - 225 - 60);
      this.heightTreeLeft = "height:" + (height) + "px";
    },
    methods: {

      /**
       * 右侧方法
       */
      // 分页刷新
      changePage(current, pageSize) {
        this.paginationRight.current = current;
        this.paginationRight.pageSize = pageSize;
        this.getPressUserQueryList();
      },
      serchByChecked(value){
        this.paginationRight.current = 1;
        this.deptCheckedLeft = value;
        this.deptselectedLeft = [];
        this.getPressUserQueryList()

      },
      serchByselected(value){
        this.paginationRight.current = 1;
        this.deptselectedLeft = value;
        this.deptCheckedLeft = [];
        this.getPressUserQueryList()

      },
      //日期控件需要的方法
      disabledStartDate(startDate) {
        const endDate = this.endDate;
        if (!startDate || !endDate) {
          return false;
        }
        return startDate.valueOf() > endDate.valueOf();
      },
      disabledEndDate(endDate) {
        const startDate = this.startDate;
        if (!endDate || !startDate) {
          return false;
        }
        return startDate.valueOf() >= endDate.valueOf();
      },
      handleStartOpenChange(open) {
        if (!open) {
          this.endOpen = true;
        }
      },
      handleEndOpenChange(open) {
        this.endOpen = open;
      },
      //查询有权限员工
      getPressUserQueryList() {
        let _this = this;
        _this.beginDate = moment(_this.beginDate).format("YYYY-MM-DD");
        _this.endDate = moment(_this.endDate).format("YYYY-MM-DD");
        // let newStartDate = _this.startDate.format("YYYY-MM-DD");
        // let newEndDate = _this.endDate.format("YYYY-MM-DD");
        // let placeIdArr = [];
        // placeIdArr = placeIdArr.concat(this.deptCheckedLeft);
        // placeIdArr = placeIdArr.concat(this.deptselectedLeft);
        this.tableLoading = true;
        exceptionAnalysis
          .getReportEveryday({
            beginDate: _this.beginDate,
            endDate: _this.endDate,
            userNoOrName:  _this.searchNameRight
          })
          .then(res => {
            console.log(res)
            if (res.data.success) {
              _this.tableLoading = false;
              _this.selectedXhRight = [];
              // _this.paginationRight.total = res.data.result.total;
              _this.listRight = res.data.result;
            } else {
              _this.tableLoading = false;
              _this.$message.error(res.data.message);
            }
          });
      },
      // 点击导出
      handleExport() {
        let parameter =
          "?startDate=" +
          this.startDate +
          "&endDate=" +
          this.endDate +
          "&userSerial=" +
          this.userSerialCheckedLeft.join(",") +
          "&deptSerial=" +
          this.deptCheckedLeft.join(",") +
          "&jlType=" +
          this.jlType.join(",");
        window.open(
          api.apiUrl + "api/report/pressUserQueryExport" + parameter,
          "_self"
        );
      },
      // 选中授权表格
      onChangeRight(selectKeys) {
        this.selectedXhRight = selectKeys;
      },
      // 点击搜若
      handleQuery() {
        this.getPressUserQueryList();
      },
      handleChange(value) {
        this.jlType = value;
      },
      popupScroll() {
      }
    }
  };
</script>

<style>

</style>
